$(function () {
    // 定义一个全局变量对象
    // 将来筛选和分页都可以修改
    let query = {
        pagenum: 2,     //是   int页码值
        pagesize: 5,   //是   int每页显示多少条数据
        cate_id: '',    //否   string 文章分类的Id
        state: ''       //否   string 文章的状态, 已发布/草稿
    }

    // 需求1:展示文章列表
    let layer = layui.layer
    initArticleList()
    // 封装成方法,后面的分页/筛选/删除会用到
    function initArticleList() {

        // 发送axios
        axios({
            method: 'GET',
            url: '/my/article/list',
            params: query
        }).then(res => {
            // console.log(res.data.data);
            // 校验失败弹出提示
            if (res.data.status != 0) return layer.msg(res.data.message)


            // console.log(res.data);
            // 渲染表格
            let arr = []
            res.data.data.forEach(ele => {

                arr.push(`
                <tr>
                     <td>${ele.title}</td>
                     <td>${ele.cate_name}</td>
                     <td>${gettime(ele.pub_date)}</td>
                     <td>${ele.state}</td>
                     <td>
                         <button data-id="${ele.Id}" class="layui-btn  layui-btn layui-btn-xs" id="aditBtn">编辑</button>
                         <button  data-id="${ele.Id}" class="layui-btn deleteBtn layui-btn layui-btn-xs layui-btn-danger" id="deleteBtn">删除</button>
                     </td>
                </tr>
                
                `)
            });
            let str = arr.join('')
            $('tbody').empty().html(str)
            renderPage(res.data.total)

        })
    }



    let form = layui.form
    // 需求2:渲染文章分类
    // 调用方法
    initArtCateList()
    function initArtCateList() {
        // 发送axios
        axios({
            method: 'GET',
            url: '/my/article/cates',
        }).then(res => {
            // 检验失败提示
            if (res.data.status != 0) return layer.msg(res.data.message)


            // 定义数组
            let arr = ['<option value="">请选择文章所属分类</option>']
            // 遍历获取数据
            res.data.data.forEach(ele => {
                arr.push(`
                    <option value="${ele.Id}">${ele.name}</option>
                   
                    `)
            })
            // 转成字符串不然是,分隔的
            let str = arr.join('')
            // 获取标签添加数据
            $('[name=cate_id]').empty().html(str)
            // 数据无法渲染到表格,调用方法才可以
            form.render()

        })
    }


    // 需求3:筛选
    $('#searchForm').on('submit', function (e) {
        e.preventDefault()
        query.cate_id = $('[name=cate_id]').val()
        query.state = $('[name=state]').val()
        initArticleList()
    })


    // 需求4:分页
    function renderPage(total) {
        let laypage = layui.laypage;
        // console.log(total);
        //执行一个laypage实例
        laypage.render({
            elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
            count: total,         //数据总数。一般通过服务端得到	
            limit: query.pagesize,	//每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
            curr: query.pagenum,   //控制默认显示某一页
            groups: 3,              //连续出现的页数
            first: '首页',          //第一页显示的信息
            last: '尾页',           //最后一页显示的信息
            prev: '<',              //上一页
            next: '>',              //下一页
            layout: ['count', 'limit', 'prev', 'page', 'next', 'refresh', 'skip'],
            limits: [2, 3, 5, 10],
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数
                console.log(obj);
                //首次不执行
                if (!first) {
                    //do something
                    // 点击改变页数和页面数,并重新渲染
                    query.pagenum = obj.curr
                    query.pagesize = obj.limit
                    initArticleList()
                }
            }
        });
    }

    // 需求5:点击删除按钮 删除数据

    $('body').on('click', '#deleteBtn', function () {
        console.log($('.deleteBtn').length);
        let id = $(this).attr('data-id')
        // 弹窗 确定删除吗?
        layer.confirm('确定删除吗?', { icon: 3, title: '提示' }, function (index) {
            //    发送axios
            axios({
                method: 'GET',
                url: '/my/article/delete/' + id,

            }).then(function (res) {
                // 判断是否成功
                if (res.data.status != 0) return layer.msg(res.data.message)

                // 当我们再次发起请求的时候,如果页面中还有一条数据,让页面-- 当前页大于等于2有资格--
                // 优化 - 短路运算,前面的代码满足条件,后面的才会执行

                $('.deleteBtn').length == 1 && query.pagenum >= 2 && query.pagenum--

                // 成功的提示信息
                layer.msg(res.data.message)
                // 再次渲染页面
                initArticleList()
            })

            // 在axios处理函数外面关闭对话框
            layer.close(index);
        });
    })




})